import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";

const router = createRouter({
  // 后端喜欢HashHistory， 前台一般是History模式
  history: createWebHistory(),
  routes: [
    { path: "/", redirect: "/home" },

    {
      name: "zhuye",
      path: "/home",
      component: () => import("../page/Home.vue"),
    },
    {
      name: "xinwen",
      path: "/news",
      component: () => import("../page/News.vue"),
      children: [
        {
          name: "xiangqing",
          // params参数需要在规则中占位, 在参数后面加个问号，表示该参数可有可无
          path: "detail/:id/:title/:content?",
          component: () => import("../page/Detail.vue"),
          // 27行代码实际上 <Detail/>是这样的，
          // props 这个属性可以设置自动接收路由传来的数据, 而当你设置了props这个属性之后就是 <Detail a='6' b='7'/>这样子的，将你的数据作为标签属性传递

          // 第一种写法,将路由收到的所有【params】参数作为props传给路由组件
          props: true,

          // 第二种写法,函数写法，可以自己决定将什么作为props给路由组件,接收一个值，这个是就是当前页面路由route
          // props(route) {
          //   return route.query;
          // },

          // 第三种写法,对象写法，可以自己决定将什么作为props给路由组件
          // props: {
          //   a: 100,
          //   b: 200,
          //   c: 300,
          // },
        },
      ],
    },
    {
      name: "guanyu",
      path: "/about",
      component: () => import("../page/About.vue"),
    },
  ],
});

export default router;
